<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="rgba(0,0,0,0)">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #000"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="
          color: #000;
          font-weight: 700;
          font-size: 16px;
          line-height: 30px;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;"
        >注册</view>
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size: 38rpx"> </view>
      </view>
    </cloudHeader>
    <view class="container">

      <view class="login">
        <text class="login-title">注册</text>
        <text class="login-welcome">欢迎来到蜗牛算力，请使用手机号注册~</text>
      </view>

      <view class="register_box">

        <reg-mobile v-if="navIndex == 0" />

      </view>
    </view>
  </cloudPage>
</template>

<script>
import regMobile from "./components/regMobile";
import regEmail from "./components/regEmail";
export default {
  components: {
    regMobile,
    regEmail,
  },
  data() {
    return {
      navIndex: 0,
    };
  },
  computed: {
    registerNav() {
      return [
        this.$t("mf.auth.register_mobile"),
        this.$t("mf.auth.register_email"),
      ];
    },
  },
  methods: {
    navChange(index) {
      this.navIndex = index;
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  /* padding-top: 480rpx; */
}
.login_logo {
  width: 188rpx;
  height: 226rpx;
  position: relative;
  top: 0rpx;
  left: 50%;
  transform: translateX(-50%);
}
.register_box {
  width: 100%;
  position: absolute;
  top: 300rpx;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 60rpx 60rpx 0px 0px;
  padding: 60rpx;
  box-sizing: border-box;
}
.nav_item {
  box-sizing: border-box;
  padding-left: 60rpx;
  margin-bottom: 80rpx;
}


.reg{
  display: flex;
  justify-content: flex-end;
  margin-right: 24rpx;
  margin-top: 37rpx;
  color: #2A96EE;
  font-size: 34rpx;
}
.login{
  display: flex;
  flex-direction: column;
  margin-left: 54rpx;
  margin-top: 106rpx;
}
  .login-title{
			font-size: 48rpx;
		}
		.login-welcome{
			font-size: 28rpx;
			margin-top: 30rpx;
		}
		.login-form{
			margin-top: 30rpx;
      padding-bottom:30rpx;
      border-bottom:1px solid #e1e1e1;
		}
		.login-forgetPwd{
			display: flex;
			justify-content: flex-end;
			font-size: 24rpx;
			color: #2A96EE;
			margin-right: 52rpx;
			margin-top: 37rpx;
		}
		.login-btn{
			width: 642rpx;
			height: 88rpx;
			font-size: 32rpx;
			line-height: 88rpx;
			margin-top: 79rpx;
			margin-left: 0;
			border-radius: 12rpx;
      background-color: #2A96EE;
      color: #fff;
		}
    
    .grace-button {
      font-size: 12rpx !important;
      background-color: #2A96EE;
      width: 147rpx;
      height: 48rpx;
      border-radius: 50rpx;
      line-height: 48rpx;
      padding: 0;
      color: #1f2032;
    }
</style>
